<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amber - Pet Care Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">
    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">
    <style>
        .message::-webkit-scrollbar {
            /*滚动条整体样式*/
            width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 10px;
        }
        .message::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.05);
            background: rgb(245,245,245);
        }
    </style>
</head>

<body style="font-family: 'Britannic Bold'">
<div id="app">
    <!-- Header Section Start -->
    <div class="header section">

        <!-- Header Bottom Start -->
        <div class="header-bottom">
            <div class="header-sticky">
                <div class="container">
                    <div class="row align-items-center position-relative">

                        <!-- Header Logo Start -->
                        <div class="col-lg-3 col-md-4 col-6">
                            <div class="header-logo">
                                <a href="index.html"><img src="assets/images/logo/logo.png" alt="Site Logo" /></a>
                            </div>
                        </div>
                        <!-- Header Logo End -->

                        <!-- Header Menu Start -->
                        <div class="col-lg-6 d-none d-lg-block">
                            <div class="main-menu">
                                <ul>
                                    <li><a href="index.html">首页</a></li>
                                    <li><a href="shop.html">商品列表</a></li>
                                    <li><a href="cart.html">购物车</a></li>
                                    <li><a href="about.html">关于</a></li>
                                    <li><a href="../login.html">退出登录</a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- Header Menu End -->

                        <!-- Header Action Start -->
                        <div class="col-lg-3 col-md-8 col-6">
                            <div class="header-actions">

                                <!-- Header Action Search Button Start -->
                                <div class="header-action-btn header-action-btn-search d-none d-md-flex">
                                    <div class="action-execute">
                                        <a class="action-search-open" href="javascript:void(0)"><i
                                                class="icon-magnifier icons"></i></a>
                                        <a class="action-search-close" href="javascript:void(0)"><i
                                                class="ti-close"></i></a>
                                    </div>
                                    <!-- Search Form and Button Start -->
                                    <form class="header-search-form" action="#">
                                        <input type="text" class="header-search-input"
                                               placeholder="Search Our Store">
                                        <button class="header-search-button"><i
                                                class="icon-magnifier icons"></i></button>
                                    </form>
                                    <!-- Search Form and Button End -->
                                </div>
                                <!-- Header Action Search Button End -->

                                <!-- Header My Account Button Start -->
                                <a href="my-account.html" class="header-action-btn header-action-btn-wishlist">
                                    <i class="icon-user icons"></i>
                                </a>
                                <!-- Header My Account Button End -->

                                <!-- Header Action Button Start -->
                                <div class="header-action-btn header-action-btn-cart d-none d-sm-flex">
                                    <a class="cart-visible" href="javascript:void(0)"
                                       @click="()=>{$('.header-cart-content').slideToggle('slow');}">
                                        <i class="icon-handbag icons"></i>
                                        <span class="header-action-num">{{cartNum}}</span>
                                    </a>

                                    <!-- Header Cart Content Start -->
                                    <div class="header-cart-content" id="carts">

                                        <!-- Cart Procut Wrapper Start  -->
                                        <div class="cart-product-wrapper">

                                            <!-- Cart Product/Price Start -->
                                            <div class="cart-product-inner p-b-20 m-b-20 border-bottom"
                                                 v-for="(item,index) in cartList" :key="index">

                                                <!-- Single Cart Product Start -->
                                                <div class="single-cart-product">
                                                    <div class="cart-product-thumb">
                                                        <a href="#"><img :src="item.images"
                                                                                           alt="Cart Product"></a>
                                                    </div>
                                                    <div class="cart-product-content">
                                                        <h3 class="title"><a href="#">{{item.shopName}}</a></h3>
                                                        <div class="product-quty-price">
                                                                <span class="cart-quantity">数量: <strong> {{item.number}}
                                                                    </strong></span>
                                                            <span class="price">
                                                                    <span class="new">￥{{item.money}}</span>
                                                                </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Single Cart Product End -->

                                                <!-- Product Remove Start -->
                                                <div class="cart-product-remove">
                                                    <a href="#/" @click="delCart(item.id)"><i
                                                            class="icon-close"></i></a>
                                                </div>
                                                <!-- Product Remove End -->

                                            </div>
                                            <!-- Cart Product/Price End -->

                                        </div>
                                        <!-- Cart Procut Wrapper -->

                                        <!-- Cart Product Total Start -->
                                        <div class="cart-product-total p-b-20 m-b-20 border-bottom">
                                            <span class="value">总价</span>
                                            <span class="price">￥{{countMoney}}</span>
                                        </div>
                                        <!-- Cart Product Total End -->

                                        <!-- Cart Product Button Start -->
                                        <div class="cart-product-btn m-t-20">
                                            <a href="cart.html"
                                               class="btn btn-outline-light btn-hover-primary w-100">查看购物车</a>
                                            <a href="#" class="btn btn-outline-light btn-hover-primary w-100 m-t-20"
                                               @click="buyAll">全部下单</a>
                                        </div>
                                        <!-- Cart Product Button End -->

                                    </div>
                                    <!-- Header Cart Content End -->

                                </div>
                                <div class="header-action-btn header-action-btn-cart d-flex d-sm-none">
                                    <a href="cart.html">
                                        <i class="icon-handbag icons"></i>
                                        <span class="header-action-num">3</span>
                                    </a>
                                </div>
                                <!-- Header Action Button End -->

                                <!-- Mobile Menu Hambarger Action Button Start -->
                                <a href="javascript:void(0)"
                                   class="header-action-btn header-action-btn-menu d-lg-none d-md-flex">
                                    <i class="icon-menu"></i>
                                </a>
                                <!-- Mobile Menu Hambarger Action Button End -->

                            </div>
                        </div>
                        <!-- Header Action End -->

                    </div>
                </div>
            </div>
        </div>
        <!-- Header Bottom End -->

    </div>
    <!-- Header Section End -->

    <!-- Hero/Intro Slider Start -->
    <div class="section">
        <div class="hero-slider swiper-container">
            <div class="swiper-wrapper">

                <div class="hero-slide-item swiper-slide">
                    <div class="hero-slide-bg">
                        <img src="assets/images/slider/slider1-1.png" alt="Slider Image" />
                    </div>
                    <div class="container">
                        <div class="hero-slide-content text-start">
                            <h5 class="sub-title">保持我们的联系</h5>
                            <h2 class="title m-0">宠物商品商店</h2>
                            <p class="ms-0">我们这里有最适合你宠物的商品
                            </p>
                            <a href="shop.html" class="btn btn-dark btn-hover-primary">现在购买</a>
                        </div>
                    </div>
                </div>

                <div class="hero-slide-item swiper-slide">
                    <div class="hero-slide-bg">
                        <img src="assets/images/slider/slider1-2.png" alt="Slider Image" />
                    </div>
                    <div class="container">
                        <div class="hero-slide-content text-center text-md-end">
                            <h5 class="sub-title">保持我们的联系</h5>
                            <h2 class="title m-0">宠物商品商店</h2>
                            <p>我们这里有最适合你宠物的商品</p>
                            <a href="shop.html" class="btn btn-dark btn-hover-primary">现在购买</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Swiper Pagination Start -->
            <div class="swiper-pagination d-lg-none"></div>
            <!-- Swiper Pagination End -->

            <!-- Swiper Navigation Start -->
            <div class="home-slider-prev swiper-button-prev main-slider-nav d-lg-flex d-none"><i
                    class="icon-arrow-left"></i></div>
            <div class="home-slider-next swiper-button-next main-slider-nav d-lg-flex d-none"><i
                    class="icon-arrow-right"></i></div>
            <!-- Swiper Navigation End -->
        </div>
    </div>
    <!-- Hero/Intro Slider End -->

    <div class="section section-padding">
        <div class="container">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 m-b-n30">

                <div class="col m-b-30" data-aos="fade-up" data-aos-duration="1000">
                    <!-- Single CTA Wrapper Start -->
                    <div class="single-cta-wrapper">

                        <!-- CTA Icon Start -->
                        <div class="cta-icon">
                            <i class="ti-truck"></i>
                        </div>
                        <!-- CTA Icon End -->

                        <!-- CTA Content Start -->
                        <div class="cta-content">
                            <h4 class="title">免费送货</h4>
                            <p>所有订单均免运费</p>
                        </div>
                        <!-- CTA Content End -->

                    </div>
                    <!-- Single CTA Wrapper End -->
                </div>

                <div class="col m-b-30" data-aos="fade-up" data-aos-duration="1100">
                    <!-- Single CTA Wrapper Start -->
                    <div class="single-cta-wrapper">

                        <!-- CTA Icon Start -->
                        <div class="cta-icon">
                            <i class="ti-headphone-alt"></i>
                        </div>
                        <!-- CTA Icon End -->

                        <!-- CTA Content Start -->
                        <div class="cta-content">
                            <h4 class="title">在线支持</h4>
                            <p>全天在线实时支持</p>
                        </div>
                        <!-- CTA Content End -->

                    </div>
                    <!-- Single CTA Wrapper End -->
                </div>

                <div class="col m-b-30" data-aos="fade-up" data-aos-duration="1200">
                    <!-- Single CTA Wrapper Start -->
                    <div class="single-cta-wrapper">

                        <!-- CTA Icon Start -->
                        <div class="cta-icon">
                            <i class="ti-bar-chart"></i>
                        </div>
                        <!-- CTA Icon End -->

                        <!-- CTA Content Start -->
                        <div class="cta-content">
                            <h4 class="title">退款</h4>
                            <p>5天内免费退款</p>
                        </div>
                        <!-- CTA Content End -->

                    </div>
                    <!-- Single CTA Wrapper End -->
                </div>

            </div>
        </div>
    </div>

    <!-- Product Section Start -->
    <div class="section position-relative">
        <div class="container">

            <!-- Section Title & Tab Start -->
            <div class="row" data-aos="fade-up" data-aos-duration="1000">
                <!-- Tab Start -->
                <div class="col-12">
                    <ul class="product-tab-nav nav justify-content-center m-b-n15 p-b-40 title-border-bottom">
                        <li class="nav-item m-b-15"><a class="nav-link active" data-bs-toggle="tab"
                                                       href="#tab-product-all"
                                                       @click="()=>{this.oneClassification = '狗狗专区';getList()}">狗狗专区</a></li>
                        <li class="nav-item m-b-15"><a class="nav-link" data-bs-toggle="tab" href="#tab-product-all"
                                                       @click="()=>{this.oneClassification = '猫咪专区';getList()}">猫咪专区</a></li>
                        <li class="nav-item m-b-15"><a class="nav-link" data-bs-toggle="tab" href="#tab-product-all"
                                                       @click="()=>{this.oneClassification = '鸟儿专区';getList()}">鸟儿专区</a></li>
                        <li class="nav-item m-b-15"><a class="nav-link" data-bs-toggle="tab" href="#tab-product-all"
                                                       @click="()=>{this.oneClassification = '龟、鱼专区';getList()}">龟、鱼专区</a></li>
                        <li class="nav-item m-b-15"><a class="nav-link" data-bs-toggle="tab" href="#tab-product-all"
                                                       @click="()=>{this.oneClassification = '鼠类专区';getList()}">鼠类专区</a></li>
                        <li class="nav-item m-b-15"><a class="nav-link" data-bs-toggle="tab" href="#tab-product-all"
                                                       @click="()=>{this.oneClassification = '兔子专区';getList()}">兔子专区</a></li>
                    </ul>
                </div>
                <!-- Tab End -->
            </div>
            <!-- Section Title & Tab End -->

            <!-- Products Tab Start -->
            <div class="row" data-aos="fade-up" data-aos-duration="1100">
                <div class="col-12">
                    <div class="tab-content">

                        <div class="tab-pane fade show active" id="tab-product-all">
                            <div class="row m-b-n40">

                                <!-- Product Start -->
                                <div class="col-12 col-sm-6 col-lg-3 product-wrapper m-b-40"
                                     v-for="(item,index) in selectList" :key="index">
                                    <div class="product">
                                        <!-- Thumb Start  -->
                                        <div class="thumb">
                                            <a href="#" class="image">
                                                <img class="fit-image" :src="item.images" alt="Product" />
                                            </a>
                                            <span class="badges">
                                                    <span class="new">New</span>
                                                </span>
                                            <div class="action-wrapper">
                                                <a href="#" class="action quickview" data-bs-toggle="modal"
                                                   data-bs-target="#quick-view" @click="getGoodsDetail(item.id)"><i
                                                        class="ti-plus"></i></a>
                                                <a href="#" class="action wishlist" data-bs-toggle="modal"
                                                   data-bs-target="#message" title="Wishlist" @click="getMessageList(item.id)"><i
                                                        class="ti-comment-alt"></i></a>
                                                <a href="#" class="action cart" title="Cart"><i
                                                        class="ti-shopping-cart"
                                                        @click="addCart(item.id,item.salePrice)"></i></a>
                                            </div>
                                        </div>
                                        <!-- Thumb End  -->

                                        <!-- Content Start  -->
                                        <div class="content">
                                            <h5 class="title"><a href="shop.html">{{item.shopName}}</a></h5>
                                            <span class="rating">
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star-half-o"></i>
                                                    <i class="fa fa-star-o"></i>
                                                </span>
                                            <span class="price">
                                                    <span class="new">￥{{item.salePrice}}</span>
                                                </span>
                                        </div>
                                        <!-- Content End  -->
                                    </div>
                                </div>
                                <!-- Product End -->

                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- Products Tab End -->
        </div>
    </div>
    <!-- Product Section End -->

    <!-- Banner Section Start -->
    <div class="section section-margin">

        <div class="container">
            <!-- Banners Start -->
            <div class="row m-b-n30">

                <!-- Banner Start -->
                <div class="col-md-6 col-12 m-b-30" data-aos="fade-up" data-aos-duration="1000">
                    <a href="shop.html" class="banner">
                        <img class="fit-image" src="assets/images/banner/1.png" alt="Banner Image" />
                    </a>
                </div>
                <!-- Banner End -->

                <!-- Banner Start -->
                <div class="col-md-6 col-12 m-b-30" data-aos="fade-up" data-aos-duration="1400">
                    <a href="shop.html" class="banner">
                        <img class="fit-image" src="assets/images/banner/2.png" alt="Banner Image" />
                    </a>
                </div>
                <!-- Banner End -->

            </div>
            <!-- Banners End -->
        </div>

    </div>
    <!-- Banner Section End -->

    <!-- Footer Section Start -->
    <footer class="section footer-section">
        <!-- Footer Top Start -->
        <div class="footer-top bg-name-bright section-padding">
            <div class="container">
            </div>
        </div>
        <!-- Footer Top End -->

        <!-- Footer Bottom Start -->
        <div class="footer-bottom bg-name-light p-t-20 p-b-20">
            <div class="container">
                <div class="row align-items-center m-b-n20">
                    <div class="col-md-6 text-center text-md-start order-2 order-md-1 m-b-20">
                        <div class="copyright-content">
                            <p class="mb-0">Copyright &copy; 2022.XXX.</p>
                        </div>
                    </div>
                    <div class="col-md-6 text-center text-md-end order-1 order-md-2 m-b-20">
                        <div class="payment">
                            <a href="#/">
                                <img class="fit-image" src="assets/images/payment/payment_large.png" alt="Payment">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Bottom End -->
    </footer>
    <!-- Footer Section End -->

    <!-- Modal Start  -->
    <div class="modalquickview modal fade" id="quick-view" tabindex="-1" aria-labelledby="quick-view" role="dialog"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <button class="btn close" data-bs-dismiss="modal">×</button>
                <div class="row">
                    <div class="col-md-6 col-12">

                        <!-- Product Details Image Start -->
                        <div class="modal-product-carousel">

                            <!-- Single Product Image Start -->
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <a class="swiper-slide" href="#">
                                        <img class="w-100" :src="editForm.images" alt="Product">
                                    </a>
                                </div>
                            </div>
                            <!-- Single Product Image End -->

                        </div>
                        <!-- Product Details Image End -->

                    </div>
                    <div class="col-md-6 col-12 overflow-hidden position-relative">

                        <!-- Product Summery Start -->
                        <div class="product-summery position-relative">

                            <!-- Product Head Start -->
                            <div class="product-head m-b-15">
                                <h2 class="product-title">{{editForm.shopName}}</h2>
                            </div>
                            <!-- Product Head End -->

                            <!-- Rating Start -->
                            <span class="rating justify-content-start m-b-10">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-half-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </span>
                            <!-- Rating End -->

                            <!-- Price Box Start -->
                            <div class="price-box m-b-10">
                                <span class="regular-price">￥{{editForm.salePrice}}</span>
                            </div>
                            <!-- Price Box End -->

                            <!-- SKU Start -->
                            <div class="sku m-b-15">
                                <span>ID: {{editForm.id}}</span>
                            </div>
                            <!-- SKU End -->

                            <!-- Quantity Start -->
                            <div class="quantity d-flex align-items-center justify-content-start m-b-25">
                                <span class="m-r-10"><strong>数量: </strong></span>
                                <input class="cart-plus-minus-box" v-model="detailNum" type="text">
                            </div>
                            <!-- Quantity End -->
                            <!-- Cart Button Start -->
                            <div class="cart-btn action-btn m-b-30">
                                <div class="action-cart-btn-wrapper d-flex justify-content-start">
                                    <div class="add-to_cart">
                                        <a class="btn btn-primary btn-hover-dark rounded-0" href="#"
                                           @click="addCart(editForm.id,editForm.salePrice)">添加到购物车</a>
                                    </div>
<!--                                    <a href="#" title="Wishlist" class="action"><i class="ti-heart"></i></a>-->
                                </div>
                            </div>
                            <!-- Cart Button End -->

<!--                            &lt;!&ndash; Social Shear Start &ndash;&gt;-->
<!--                            <div class="social-share">-->
<!--                                <div class="widget-social justify-content-center m-b-30">-->
<!--                                    <a title="Twitter" href="#/"><i class="icon-social-twitter"></i></a>-->
<!--                                    <a title="Instagram" href="#/"><i class="icon-social-instagram"></i></a>-->
<!--                                    <a title="Linkedin" href="#/"><i class="icon-social-linkedin"></i></a>-->
<!--                                    <a title="Skype" href="#/"><i class="icon-social-skype"></i></a>-->
<!--                                    <a title="Dribble" href="#/"><i class="icon-social-dribbble"></i></a>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; Social Shear End &ndash;&gt;-->

<!--                            &lt;!&ndash; Payment Option Start &ndash;&gt;-->
<!--                            <div class="payment-option m-t-20 d-flex justify-content-start">-->
<!--                                <span><strong>Payment: </strong></span>-->
<!--                                <a href="#">-->
<!--                                    <img class="fit-image m-l-5" src="assets/images/payment/payment_large.png"-->
<!--                                         alt="Payment Option Image">-->
<!--                                </a>-->
<!--                            </div>-->
                            <!-- Payment Option End -->

                        </div>
                        <!-- Product Summery End -->

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal End  -->
    <!-- Modal Start  -->
    <div class="modalquickview modal fade" id="message" tabindex="-1" aria-labelledby="quick-view" role="dialog"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="width: 600px;">
                <button class="btn close" data-bs-dismiss="modal">×</button>
                <div class="row">
                    <div class="col-24 overflow-hidden position-relative">

                        <!-- Product Summery Start -->
                        <div class="product-summery position-relative">

                            <!-- Product Head Start -->
                            <div class="product-head m-b-15">
                                <h2 class="product-title">商品留言</h2>
                            </div>
                            <!-- Product Head End -->

                            <div class="message" style="height: 300px;overflow-x: hidden;overflow-y: scroll;">
                                <div class="price-box m-b-10" v-for="(item,index) in messageList" :key="index">
                                    <span class="regular-price">{{item.account}}：{{item.massageText}}</span>
                                </div>
                            </div>

                            <!-- Quantity Start -->
                            <div class="quantity d-flex align-items-center justify-content-start m-b-25" style="margin: 25px 0 5px 0;">
                                <span class="regular-price"><strong>留言内容: </strong></span>
                            </div>
                            <div class="quantity d-flex align-items-center justify-content-start m-b-25">
                                <textarea class="form-control" v-model="massageText"></textarea>
                            </div>
                            <!-- Quantity End -->
                            <!-- Cart Button Start -->
                            <div class="cart-btn action-btn m-b-30">
                                <div class="action-cart-btn-wrapper d-flex justify-content-start">
                                    <div class="add-to_cart">
                                        <a class="btn btn-primary btn-hover-dark rounded-0" data-bs-dismiss="modal" href="#"
                                           @click="insertMessage(shopId)">发布评论</a>
                                    </div>
                                </div>
                            </div>
                            <!-- Cart Button End -->

                        </div>
                        <!-- Product Summery End -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal End  -->
</div>
<!-- Mobile Menu End -->
<!-- Use the minified version files listed below for better performance and remove the files listed above -->

<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/plugins.min.js"></script>

<!--Main JS-->
<script src="assets/js/main.js"></script>
<script src="assets/js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                userId: '',
                userName: '',
                role: '',
                isVip: '',
                address: '',
                selectList: [],
                cartList: [],
                messageList:[],
                page: 1,
                size:9999999,
                shopName: '',
                cartNum: 0,
                countMoney: 0,
                oneClassification: '狗狗专区',
                editForm: {
                    id: null,
                    oneClassification: '',
                    twoClassification: '',
                    shopName: '',
                    sale_price: 0,
                    purchasePrice: null,
                    salePrice: null,
                    numberCount: null,
                    images: ''
                },
                detailNum: 1,
                shopId:'',
                massageText:''
            }
        },
        mounted() {
            var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            if (userInfo == "" || userInfo == null) {
                alert("您还没有登录，请先登录后在进行操作！");
                window.location.href = '../login.html'
            };
            this.userName = userInfo.account
            this.role = userInfo.role
            this.userId = userInfo.id
            this.getUserInfo()
            this.getList()
            this.getCartList()
        },
        methods: {
            getUserInfo(){
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json',
                    url: "/userInfo/queryById",
                    data: JSON.stringify({
                        id: that.userId
                    }),
                    success: function (data) {
                        that.isVip = data.vip
                        that.address = data.address
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            getList() {
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    url: "/shop/queryByPage",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "size": that.size,
                        "page": that.page,
                        "shopName": that.shopName,
                        "oneClassification": that.oneClassification
                    }),
                    success: function (data) {
                        that.selectList = data.data.list
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            getGoodsDetail(id) {
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json',
                    url: "/shop/queryById",
                    data: JSON.stringify({
                        id: id
                    }),
                    success: function (data) {
                        that.editForm = data
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            getCartList() {
                const that = this
                that.countMoney = 0
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    url: "/orderList/list",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "size": that.size,
                        "page": that.page,
                        "shopState": '0',
                        "bugId": that.userId
                    }),
                    success: function (data) {
                        data.data.list.forEach((item) => {
                            that.countMoney += item.money
                        })
                        that.cartList = data.data.list
                        that.cartNum = data.data.total
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            addCart(id, salePrice) {
                const that = this
                if (confirm("确定要加入购物车吗?")) {
                    if(that.isVip === '1'){
                        salePrice = salePrice * 0.8
                    }
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST", //方法类型
                        dataType: "json", //预期服务器返回的数据类型
                        contentType: 'application/json',
                        url: "/orderList/add",
                        data: JSON.stringify({
                            shopId: id,
                            number: that.detailNum,
                            shopState: '0',
                            bugId: that.userId,
                            money: that.detailNum * salePrice,
                            getAddress: that.address
                        }),
                        success: function (data) {
                            alert("添加成功！");
                            that.getCartList()
                            that.detailNum = 1
                        },
                        error: function () {
                            alert("异常！");
                        }
                    });
                }
            },
            buyAll() {
                const that = this
                if (confirm("确定要全部下单吗?")) {
                    that.cartList.forEach((item) => {
                        $.ajax({
                            //几个参数需要注意一下
                            type: "POST", //方法类型
                            dataType: "json", //预期服务器返回的数据类型
                            contentType: 'application/json',
                            url: "/orderList/edit",
                            data: JSON.stringify({
                                id: item.id,
                                shopState: '1'
                            }),
                            success: function (data) {
                                that.getCartList()
                            },
                            error: function () {
                                alert("异常！");
                            }
                        });
                    })
                }
            },
            delCart(id) {
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json',
                    url: "/orderList/deleteById",
                    data: JSON.stringify({
                        id: id
                    }),
                    success: function (data) {
                        that.getCartList()
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            getMessageList(shopId){
                const that = this
                that.shopId = shopId
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json',
                    url: "/shopMassage/queryByPage",
                    data: JSON.stringify({
                        "size": that.size,
                        "page": that.page,
                        "shopId": shopId
                    }),
                    success: function (data) {
                        that.messageList = data.data.list
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            insertMessage(shopId){
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json',
                    url: "/shopMassage/add",
                    data: JSON.stringify({
                        shopId: shopId,
                        massageText: that.massageText,
                        userId: that.userId,
                        type:'0'
                    }),
                    success: function (data) {
                        alert("发布成功")
                        that.getMessageList()
                        that.massageText = ''
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            }
        }
    })
</script>
</body>

</html>
